<template>
    <div class="demo-drawer__content">
        <el-drawer ref="drawer" title="个人资料" :visible.sync="drawer" direction="ltr" custom-class="demo-drawer"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.userAccount"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.userPassword" type="password" show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickName"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确
                                    定' }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { getInfo  } from '@/api/sys/sys'
import {updateSysUser} from '@/api/sys/sysUser'
export default {
    data() {

        return {
            loading: false,
            drawer: false,
            form: {}
        }
    },
    created() {
        this.getInfo();

    },
    methods: {
        // 获取人员信息
        getInfo() {
            getInfo().then(res => {
                this.form = res.user;
            })
        },

        // 展示侧边框
        show() {
            this.drawer = true
        },
        handleClose(done) {
            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(_ => {
                    this.loading = true;
                    updateSysUser(JSON.stringify(this.form)).then(res => {
                        if(res.code ===200){
                             this.$message(res.msg);   
                        }

                    })
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch(_ => { });
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        }
    }

}
</script>
<style>
.el-input {
    width: 80%;
}
</style>